<template>
  <div id="bigbox">
    <div class="title">影厅管理</div>
    <div class="titleInfo">
      <div>2023-03-06 周一 16:50</div>
      <div>
        <select name="cars">
          <option value="www.baidu.com">1号厅</option>
          <option value="two">2号厅</option>
          <option value="three">3号厅</option>
          <option value="four">4号厅</option>
        </select>
      </div>
    </div>
    <div class="centerInfo">
      <div class="centerInfo2">
        <span>可选</span>
        <img style="width: 20px" src="../assets/icon/kexuanzuowei.png" />
      </div>
      <div class="centerInfo2">
        <span>已选</span>
        <img style="width: 20px" src="../assets/icon/yixuanzuowei.png" />
      </div>
      <div class="centerInfo2">
        <span>已售</span>
        <img
          style="width: 20px"
          src="../assets/icon/danrenzuoweixuanzuowei.png"
        />
      </div>
      <div class="centerInfo2">
        <span>维修</span>
        <img style="width: 20px" src="../assets/icon/weixiu.png" />
      </div>
    </div>
    <div class="screen">
      <div class="screen-text">屏幕方向</div>
    </div>
    <div class="smallbox">
      <div class="sbox">
        <div
          v-for="(seatItem, index) in seatlist"
          class="seatClass"
          :key="seatItem.id"
          @click="clickzuowei(seatItem)"
          @contextmenu.prevent="changezuowei(seatItem)"
          :style="{
            height: 2 + 'rem',
            width: 2 + 'rem',
            top: seatItem.gRow * 1.8 + 'rem',
            left: seatItem.gCol * 1.8 + 'rem',
          }"
        >
          <img
            class="seatImgClass"
            :seatId="seatItem.id"
            :seatIndex="index"
            :src="seatTypeList[seatItem.type].image"
          />
        </div>
      </div>
    </div>
    <div class="btn" @click="ok">确 认 选 座</div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import { get } from 'lodash';
import http from '../util/api';

const seatTypeList = [
  {
    name: '可选',
    type: '0',
    seats: 1,
    image: require('../assets/icon/kexuanzuowei.png'),
    isShow: '1',
    position: 'up',
  },
  {
    name: '已选',
    type: '0-1',
    seats: 1,
    image: require('../assets/icon/yixuanzuowei.png'),
    isShow: '1',
    position: 'up',
  },
  {
    name: '已售',
    type: '0-2',
    seats: 1,
    image: require('../assets/icon/danrenzuoweixuanzuowei.png'),
    isShow: '1',
    position: 'up',
  },
  {
    name: '维修',
    type: '0-3',
    seats: 1,
    image: require('../assets/icon/weixiu.png'),
    isShow: '1',
    position: 'up',
  },
];

const seatlist = ref([]);

http('/seatlist', 'get', 'id').then((res) => {
  if (res.data.length) {
    ElMessage({
      message: '信息获取成功！',
      type: 'success',
    });
    seatlist.value = res.data;
  } else {
    ElMessage({
      message: '信息获取失败！',
      type: 'error',
    });
  }
});

// 点击座位的时候切换图片。
const clickzuowei = (val) => {
  console.log(val, '座位信息');
  // 循环影厅内座位信息
  seatlist.value.forEach((item) => {
    // 判断：选中座位和数组内的id是否一致
    if (item.id == val.id) {
      // 一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
      if (item.type == 0) {
        item.type = 1;
        // 如果状态是1，也就是已经选中的状态，点击就会变成未选中
      } else if (item.type == 1) {
        item.type = 0;
        // 如果状态2，也就是已经出售的座位，就提示重新选座
      } else if (item.type == 2) {
        alert('已占座，请重新选座');
        // 如果状态3，代表座位损坏，也是提示维修中。
      } else if (item.type == 3) {
        alert('此座位损坏，正在维修中！');
      }
    }
  });
};

const changezuowei = (val) => {
  console.log(val);
  seatlist.value.forEach((item) => {
    if (item.id == val.id) {
      console.log(item.id);
      http(`/seatlist/${item.id}`, 'put', item).then((res) => {
        if (item.type == 2) {
          item.type = 0;
          console.log(item);
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '修改成功！',
            });
          } else {
            ElMessage({
              type: 'error',
              message: '修改失败！',
            });
          }
        }
      });
    }
  });
};
const ok = () => {
  // 筛选出选择的座位
  const info = seatList.value.filter((item) => item.type == 1);

  console.log(info);
  info.forEach((item) => {
    item.type = 2;
  });
  //  有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
  if (info.length == 0) {
    alert('请先选择座位！');
  } else {
    // alert("当前选中座位:" + list.toString());
  }
};
</script>

<style scoepd>
.seatClass {
  position: absolute;
}
.sbox {
  position: absolute;
  height: 100%;
  width: 34rem;
  left: 50%;
  transform: translate(-50%);
}
.smallbox {
  position: relative;
  margin-top: -40px;
  height: 70%;
}
.seatImgClass {
  /* position: absolute; */
  top: 0;
  left: 0;
  height: 100%;
}
.title {
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
  letter-spacing: 2px;
}
.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: gray;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}
.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.centerInfo2 {
  display: flex;
  align-items: center;
}
.screen {
  width: 250px;
  border: 30px solid #ccc;
  border-color: #ccc transparent transparent transparent;
  height: 20px;
  margin: auto;
  margin-top: 10px;
}
.screen-text {
  text-align: center;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-top: -30px;
}
.btn {
  /* position: absolute; */

  bottom: 0;
  /* left: 0; */
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
}
#bigbox {
  /* background-color: #c2cac2; */
  height: 100%;
  position: relative;
}
select {
  border: none;
  background-color: #ecf5ff;
}
/* a{
  text-decoration: none;
} */
</style>
